<template>
  <div id="app">
    <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center">
    </el-amap>
    <!-- <div class="toolbar">
      <span v-if="loaded">
        location: lng = {{ lng }} lat = {{ lat }}
      </span>
      <span v-else>正在定位</span>
    </div> -->
     <router-view></router-view>
     <Tabbar v-if="showTab"></Tabbar>
  </div>
</template>

<script>
import Tabbar from './components/Tabbar.vue'
import { mapState } from 'vuex'
export default {
  name: 'app',
  components: {
    Tabbar
  },
  computed: {
    ...mapState(['showTab'])
  },
  methods: {
    setLocation: function () {
      sessionStorage.setItem('longitude', this.lng)
      sessionStorage.setItem('latitude', this.lat)
      return this.$store.commit('SETLOCATION', {
        longitude: this.lng,
        latitude: this.lat
      })
    }
  },
  data () {
    let self = this
    return {
      center: [113.9569707, 22.5832338],
      lng: 113.9569707,
      lat: 22.5832338,
      loaded: false,
      plugin: [{
        pName: 'Geolocation',
        events: {
          init (o) {
            // o 是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              if (result && result.position) {
                self.lng = result.position.lng
                self.lat = result.position.lat
                self.center = [self.lng, self.lat]
                self.loaded = true
                self.$nextTick()
                self.setLocation()
              }
            })
          }
        }
      }]
    }
  },
  mounted () {
    this.setLocation()
  }
}
</script>

<style>
html,
body {
  background: #f5f5f5;
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
}
.amap-demo {
  display: none;
}
</style>
